import React, { Component } from "react";
import { Form, Input, Table, Button,Row,Col,DatePicker, Modal } from "antd";
import Content from "../../components/Content";
const { Search } = Input;
const { Item } = Form;
const { RangePicker } = DatePicker;
const columns = [
  {
    title: "序号",
    key: "1",
    dataIndex: "id",
    className: "strain_number"
  },
  {
    title: "任务编号",
    dataIndex: "Ren_id",
    className: "other_numberme"
  },
  {
    title: "任务来源",
    dataIndex: "task_source",
    className: "generic_name"
  },
  {
    title: "任务内容",
    dataIndex: "task_content",
    className: "words"
  },
  {
    title: "任务进程",
    dataIndex: "task_process",
    className: "strain_name"
  },
  {
    title: "参与环节",
    dataIndex: "join_link",
    className: "strain_name"
  },
  {
    title: "工作人员",
    dataIndex: "worker",
    className: "popular_name"
  },
  {
    title: "参与环节时间",
    className: "strain_name",
    children:[
      
        {
          title: "开始时间",
          dataIndex: "start_link_time",
          className: "popular_3name"
        },
        {
          title: "结束时间",
          dataIndex: "end_link_time",
          className: "popular_n5ame"
        }
      
    ]
  },
  {
    title: "总体任务时间",
    className: "strain_name",
    children:[
      
        {
          title: "开始时间",
          dataIndex: "start_mass_time",
          className: "popular_3name"
        },
        {
          title: "结束时间",
          dataIndex: "end_mass_time",
          className: "popular_n5ame"
        }
      
    ]
  },
  {
    title: "操作",
    className: "operate",
    dataIndex: "",
    render: () => (
      <span>
        <a>选择</a>
      </span>
    )
  }
];

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    selectedRowKeys: [], // Check here to configure the default column
    startTime: '',
    endTime: '',
    data: [],
    total: 0,
    loading: true,
    pageNum: 1,
    pageSize: 100
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  onSubmit = evt => {

    let Ren_id = document.getElementById('Ren_id').value;
    let task_source = document.getElementById('task_source').value;
    let task_content = document.getElementById('task_content').value;
    let task_process = document.getElementById('task_process').value;
    let join_link = document.getElementById('join_link').value;
    let worker = document.getElementById('worker').value;

    let lastRenId = window.sessionStorage.getItem('Ren_id');
    if( lastRenId == Ren_id ) {
      Modal.error({
        content: 'Err：任务编号已存在！'
      })
      return;
    }

    const url = global.api.renwu;
    return global.network.post(url, {
      'id': Ren_id, 
      'Ren_id': Ren_id, 
      'task_source': task_source, 
      'task_content': task_content, 
      'task_process': task_process, 
      'join_link': join_link, 
      'worker': worker,
      'start_link_time': null,
      'end_link_time': null,
      'start_mass_time': this.state.startTime,
      'end_mass_time': this.state.endTime,
      'Acq_id': null
    })
    .then(res => {
      if( res.id == Ren_id ) {
        Modal.success({
          content: '保存成功！'
        })
        window.sessionStorage.setItem('Ren_id', Ren_id);

        this.loadData(1);
      }
    })
    .catch(err => {
      Modal.error({
        content: 'Err'
      })
    }) 

  };

  loadData = (current = 1) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    const url = global.api.renwu;
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize})
    .then(res => {
     this.setState({data: res.results, count: res.count})
    })
    .catch(err => {
      
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  onShowSizeChange = (current, pageSize) => {
    this.loadData(this.state.acqType, current, pageSize);
    this.setState({
        pageSize: pageSize
    })
  }

  paginationProps = {
    showSizeChanger: true,//设置每页显示数据条数
    showQuickJumper: false,
    showTotal: () => `共${this.state.count}条`,
    pageSize: this.state.pageSize,
    total: this.state.count,  //数据的总的条数
    onChange: (current) => this.loadData(current), //点击当前页码
    onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
        console.log(pageSize);
        this.onShowSizeChange(current, pageSize)
    }
  }

  //时间改变的方法
  onPickerChange=(date, dateString)=>{
    //这两个参数值antd自带的参数
    console.log("dateString",dateString[0],"dateString",dateString[1]);
    this.setState({
      startTime:dateString[0],
      endTime:dateString[1],  
    })
  }


  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };
    return (
      <div class="content">
        <div className="filtrate">
        <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="任务编号">
          <Input id="Ren_id" />
        </Item>
        <Item label="任务来源"><Input id="task_source" /></Item>
        <Item label="任务内容"><Input id="task_content" /></Item>
        <Item label="任务进程"><Input id="task_process" /></Item>
        <Item label="参与环节"><Input id="join_link" /></Item>
        <Item label="工作人员"><Input id="worker" /></Item>
        <Item label="任务起止时间">
          <RangePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            placeholder={['开始时间','结束时间']}
            onChange={this.onPickerChange}
          />
        </Item>
        <Item wrapperCol={{ span: 12, offset: 4 }}>
          <Row guuter={16}>
            <Col span={6}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
           
          </Row>
        </Item>
      </Form>
        </div>
        <div style={{ marginTop: 36, marginLeft: 24 }}>
          <Button
            type="primary"
            onClick={this.loadData.bind('this', 1)}
            // disabled={!hasSelected}
            loading={loading}
            style={{ width: 120 }}
          >
            查看所有任务
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={this.state.data}
          pagination={this.paginationProps}
          bordered
          style={{ marginLeft: 12 }}
        />
      </div>
      
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class StrainCreat extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default StrainCreat;
